<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入图表文件 -->
    <script src="./js/echarts.js"></script>

    <style>
      #main {
        max-width: 500px;
        height: 300px;
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      let xData = [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        yData = [
          [30, 60, 70, 40, 80, 30, 30, 60, 70, 40, 80, 30],
          [52, 62, 72, 42, 82, 52, 52, 62, 72, 42, 82, 52],
        ],
        bgData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
        nameList = ["产量", "趋势"],
        unit = "万吨",
        colors = ["rgba(0, 58, 255, 0.01)", "#159AFF"],
        linecolor = "rgba(208, 222, 238,0.7)";

      let option = {
        backgroundColor: "#000",
        grid: {
          top: "15%",
          left: "1%",
          right: "3%",
          bottom: "5%",
          containLabel: true,
        },
        legend: {
          itemWidth: 15, // 设置图例标记的大小
          itemHeight: 8, // 设置图例标记的大小
          data: nameList,
          textStyle: {
            color: "#f9f9f9",
            //   borderColor: '#fff',
          },
          top: 10,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, 0)",
          textStyle: {
            color: "#FFF",
          },
        },
        xAxis: {
          data: xData,
          axisLine: {
            show: true, //是否隐藏X轴轴线
            lineStyle: {
              color: "rgba(60,132,163,0.4)",
              width: 2,
            },
          },
          axisTick: {
            show: false, //是否隐藏X轴刻度
            alignWithLabel: true,
          },
          axisLabel: {
            show: true,
            color: "#FFF", //X轴文字颜色
            fontSize: 14,
            interval: 0,
          },
        },
        yAxis: [
          {
            type: "value",
            name: `${unit}`,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255, 255, 255, 0.15)",
                type: "dashed", // dotted 虚线
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              color: "#FFF",
              fontSize: 14,
              // 去掉y轴千位逗号
              formatter: function (value) {
                return value + "";
              },
            },
          },
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false, //隐藏X轴轴线
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: nameList[0],
            type: "bar",
            barWidth: 20,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: colors[0],
                },
                {
                  offset: 1,
                  color: colors[1],
                },
              ]),
            },
            data: yData[0],
          },
          
           {
  name: "背景", // 设置系列名称为“背景”
  type: "bar", // 定义该系列为柱状图
  barWidth: 30, // 设置柱子宽度为30px
  barGap: "-120%", // 设置柱子与上一柱状图系列的间距为负值，实现重叠效果
  yAxisIndex: 1, // 绑定到第二个Y轴
  data: bgData, // 柱状图数据来源于 `bgData` 变量，用于绘制背景阴影长度
  itemStyle: { 
    color: "rgba(255,255,255,0.039)", // 设置柱子颜色为带有透明度的白色，形成浅色阴影
  },

            tooltip: {
              show: false,
            },
            zlevel: 9,
          },
          {
            name: nameList[1],
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: 4,
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: linecolor,
              borderColor: linecolor,
              borderWidth: 2,
            },
            data: yData[1], //背景阴影长度
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);


    //   模拟ajax
    setTimeout(p=>{
        console.log(123);
        
        let bgData1 = [90, 90, 90, 90, 90, 90, 90, 100, 90, 90, 90, 100]
        let yData1 = [
          [35, 20, 75, 50, 90, 50, 60, 60, 70, 40, 80, 30],
          [50, 52, 32, 42, 52, 32, 42, 62, 72, 42, 82, 52],
        ],
        bgData = bgData1
        yData = yData1

        // 更新数据
        let upoption = {
        xAxis: {
          data: xData,
        },
        series: [
          {
            data: yData[0],
          },
          {
            data: bgData, //背景阴影长度
          },
          {
            data: yData[1], //背景阴影长度
          },
        ],
      };

        // 重新设置option
        myChart.setOption(upoption);

    },5000)
    </script>
  </body>
</html>
